<template>
  <div class="midin">
    <h1>用户注册</h1>
    <el-form status-icon label-width="100px" class="demo-ruleForm">
      <el-form-item label="账号">
        <el-input
          type="text"
          v-model="registerAccount"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="生日">
        <el-input type="date" v-model="registerBirthday" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
        <el-input type="text" v-model="registerEmail" autocomplete="off"></el-input>
        </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="registerPassword" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input type="password" v-model="registerPasswordenter" autocomplete="off"></el-input>
      </el-form-item>
      <p v-show="isShow">{{ msg }}</p>
      <el-form-item>
        <el-button type="primary" @click="registerUser()">注册</el-button>
        <el-button @click="toLogin()">去登陆</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      registerAccount: "",
      registerPassword: "",
      registerPasswordenter: "",
      registerBirthday: "",
      registerEmail: "",
      isShow: false,
      msg: "",
    };
  },
  methods: {
    async registerUser() {
      if (this.registerPassword === this.registerPasswordenter) {
        const { data: res } = await this.$axios({
          method: "post",
          url: "/user/register",
          // get params
          data: {
            userName: this.registerAccount,
            userPassword: this.registerPassword,
            userPasswordEnter: this.registerPasswordenter,
            userBirthday: this.registerBirthday,
            userEmail: this.registerEmail,
          },
        });
        if (res.data === "success") {
          this.isShow = true;
          this.msg = "注册成功";
        }
      } else {
        this.msg = "两次密码不一致";
      }
    },
    toLogin() {this.$router.replace("/login");},
  },
};
</script>

<style>
.midin {
  width: 300px;
  height: 300px;
  margin: auto;
  margin-top: 200px;
}
</style>